<script setup lang="ts">
defineOptions({
  name: "Statement"
});
import { ref} from "vue";
import { getSettlement, getSettlementState, DownloadBySettlementAgent, getListDtl, getSalarySettlementState, getSalaryByAgent } from "@/api/statement";
import { downloadFile } from "@/utils"

const selectBillState = ref("");
const agentValue = ref("");
const billValue = ref("");
const currentPage1 = ref(1)

const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const pageTotal = ref(0)

const dialogTableVisible = ref(false)
const gridData = ref([])
let tableData = ref([]);

const viewDetails = ref([])
const loading = ref(false)

const tablePageSize = ref(10)
const handleSizeChange = (val: number) => {
  currentPage1.value = 1
  tablePageSize.value = val
  getListData({pageNum: 1})
}

const handleCurrentChange = (val: number) => {
  getListData({pageNum: val})
}

const options = ref([])

getListData()
getSettlementState()
function getListData(params?) {
  const _params = {
    pageNum: 1,
    pageSize: tablePageSize.value,
    ...params
  }
  loading.value = true
  getSettlement({..._params}).then((res: any) => {
    const totalData =  res.data
    tableData.value = totalData.rows
    pageTotal.value = res.total
  }).finally(() => {
    loading.value = false
  })
}
const downloadBill = (id) => {
  DownloadBySettlementAgent({ id }, { responseType: 'blob' }).then((res: any) => {
    const { data, headers } = res
    downloadFile(data, headers)
  })
}
let getInfoID: string | number = ''
const getInfo = (id: string | number, pageNum: number = 1, pageSize: number = 10) => {
  getInfoID = id
  getListDtl({ id, pageNum, pageSize, total: 0 }).then((res: any) => {
    const { data, rows } = res;
    if (rows.length) {
      const one = rows[0]
      dialogTitle.value = `${one.startDate}~${one.endDate}对账单`
    }
    gridData.value = rows
    dialogTotal.value = data.total
  })
}
const dialogTitle = ref("")
const dialogTotal = ref(0)
const dialogTotal2 = ref(0)
const dialogCurrent = ref(1)
const dialogCurrent2 = ref(1)
const showOneTable = ref(true)
const dialogHandleSizeChange = (val: number) => {
  getInfo(val)
}

const dialogHandleCurrentChange = (val: number) => {
  getInfo(val)
}

const dialogHandleSizeChange2 = (val: number) => {
  handleDialogDetails({...dialogTotal2Item, pageNum: val})
}

const dialogHandleCurrentChange2 = (val: number) => {
  handleDialogDetails({...dialogTotal2Item, pageNum: val})
}

let dialogTotal2Item = {}
const closeDialog = () =>{
  showOneTable.value = true
  dialogTotal2Item = {}
}
const handleDialogDetails = (data) =>{
  dialogTotal2Item = data
  getSalaryByAgent({
    deptId: data.deptId,
    merchantsInfoId: data.merchantsInfoId,
    taxSourcesId:data.taxSourcesId,
    // createTimeStart: "2022-03-01",
    // createTimeEnd:  "2022-04-01"
    createTimeStart: data.startDate,
    createTimeEnd:  data.endDate,
    pageNum: data.pageNum || 1,
    pageSize:10,
    total:1
  }).then((res: any) => {
    viewDetails.value = res.rows
    dialogTotal2.value = res.total
  })
  
  console.log(data)
}

// 重置页面
const onReset = () => {
    selectBillState.value = ''
    tablePageSize.value = 10
    getListData();
}

getSalarySettlementState().then((res: any) =>{
  options.value = res.data
})
</script>
<template>
  <div class="statement">
    <div class="search">
      <div class="select">
        <el-select size="large" v-model="selectBillState" placeholder="请选择对账状态">
          <el-option v-for="item in options" :key="item.code" :label="item.desc" :value="item.code">
          </el-option>
        </el-select>
      </div>
      <div class="time zd">
        <el-date-picker v-model="billValue" size="large" type="daterange" range-separator="-" start-placeholder="账单生成开始"
          end-placeholder="账单生成结束">
        </el-date-picker>
      </div>
      <div class="time dl">
        <el-date-picker v-model="agentValue" size="large" type="daterange" range-separator="-" start-placeholder="代理确认开始"
          end-placeholder="代理确认结束">
        </el-date-picker>
      </div>
      <div class="search-btn">
        <el-button size="large" @click="getListData">查询</el-button>
        <el-button type="primary" @click="onReset" size="large">重置</el-button>
      </div>
    </div>
    <div class="c-page__bg">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column width="220" label="账单周期">
          <template #default="{ row }">
            {{ row.startDate }} ~ {{ row.endDate }}
          </template>
        </el-table-column>
        <el-table-column prop="settlementTypeDisplay" label="账单类型"></el-table-column>
        <el-table-column prop="settlementAmount" label="对账金额(元)"> </el-table-column>
        <el-table-column width="180" prop="createTime" label="生成时间"> </el-table-column>
        <el-table-column prop="verifyDeadline" label="确认截止时间"> </el-table-column>
        <el-table-column prop="verifyTime" label="对账时间"> </el-table-column>
        <el-table-column prop="settlementStateDisplay" label="状态">
          <template #default="{ row }">
            {{ row.startDate.settlementStateDisplay }}
            <div class="c-flex-row" style="align-items: center;">
              <span v-if="row.settlementStateDisplay === '已对账'" class="c-dot-success"></span>
              <span v-else class="c-dot-success"></span>
              {{ row.settlementStateDisplay }}
            </div>
          </template>
        </el-table-column>
        <el-table-column #default="{ row }" label="操作">
          <span class="c-text-primary" @click="downloadBill(row.id)">下载账单</span>
          <span class="c-text-primary" @click="getInfo(row.id), dialogTableVisible = true">查看</span>
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination v-model:current-page="currentPage1" :page-size="tablePageSize" :page-sizes="[10,20,30]" :size="size" :disabled="disabled"
          :background="background" layout="total, sizes, prev, pager, next" :total="pageTotal" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- <el-dialog v-model="dialogTableVisible" :title="dialogTitle" width="1200" center> -->
    <el-dialog v-model="dialogTableVisible" width="1200" @close="closeDialog">
      <div class="system-icon-content">
        <template v-if="showOneTable">
          <div class="flex-row">{{ dialogTitle }}</div>
          <el-table :data="gridData">
            <el-table-column label="序号" type="index" />
            <el-table-column property="merchantsInfoIdDisplay" :show-overflow-tooltip="true"  label="商户名称"/>
            <el-table-column property="deptIdDisplay" label="走款服务商" />
            <el-table-column property="totalAmount" label="总金额" />
            <el-table-column property="incomeRate" label="服务费率" />
            <el-table-column property="costRate" label="结算费率" />
            <el-table-column property="commissionDeductionProportion" label="推广点" />
            <el-table-column property="settlementAmount" label="结算金额" />
            <el-table-column #default="{ row }" label="操作">
              <span class="c-text-primary" @click="handleDialogDetails(row),showOneTable = false">查看明细</span>
              
            </el-table-column>

          </el-table>
          <div class="pagination-block">
            <el-pagination v-model:current-page="dialogCurrent" :page-size="10" :size="size" :disabled="disabled"
              :background="background" layout="total, prev, pager, next" :total="dialogTotal"
              @size-change="dialogHandleSizeChange" @current-change="dialogHandleCurrentChange" />
          </div>
        </template>
        <template v-else>
          <div class="back">
            <div @click="showOneTable = true" class="back-text">
              <el-icon>
                <ArrowLeftBold />
              </el-icon>
              <span>返回</span>
            </div>
            <span class="title">{{ dialogTitle }}</span>
          </div>
          <el-table :data="viewDetails" scroll-x width="1300">
            <el-table-column width="140" prop="batchNumber" label="交易批次编号/订单号"></el-table-column>
            <el-table-column prop="sourceOfCommissionDisplay" label="推广来源"></el-table-column>
            <el-table-column prop="merchantsInfoIdDisplay" label="商户名称"></el-table-column>
            <el-table-column prop="deptIdDisplay" label="服务公司企业"></el-table-column>
            <el-table-column width="140" #default="{ row }" label="成功金额/下发金额">
              {{ row.succeedTotalActualAmount }} / {{ row.totalActualAmount }}
            </el-table-column>
            <el-table-column width="140" #default="{ row }" label="成功笔数/下发总笔数">
              {{ row.succeedTotalActualAmount }} / {{ row.totalActualAmount }}
            </el-table-column>
            <el-table-column prop="commissionDeductionProportion" label="退票金额"></el-table-column>
            <el-table-column prop="costRate" label="费率1"></el-table-column>
            <el-table-column prop="commissionState" label="费率2"></el-table-column>
            <el-table-column prop="incomeRate" label="推广折扣"></el-table-column>
          </el-table>
          <div class="pagination-block">
            <el-pagination v-model:current-page="dialogCurrent2" :page-size="10" :size="size" :disabled="disabled"
              :background="background" layout="total, prev, pager, next" :total="dialogTotal2"
              @size-change="dialogHandleSizeChange2" @current-change="dialogHandleCurrentChange2" />
          </div>
        </template>
      </div>

    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.statement {
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.search {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .search-btn,
  .select {
    width: 20%;
    padding-right: 20px;
  }
  .time {
    width: 366px;
    padding-right: 20px;
  }
  .time,.select,.search-btn {
    padding-top: 15px;
  }

  .search-btn {
    width: 200px;
    padding-left: 15px;
  }
}

.c-page__bg {
  width: 100%;
  height: 100%;
  margin-top: 25px;
  padding-bottom: 24px;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.c-text-primary {
  font-size: 14px;
  color: #1C9FFF;
  white-space: nowrap;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.pagination-block {
  padding-top: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
}

.c-dot-success,
.c-dot-info {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #43bf0a;
}

.c-dot-info {
  background-color: #bfbfbf;
}

.system-icon-content {
  min-height: 500px;
}

.flex-row {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #262626;
}

.back {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #1c9fff;

  .back-text {
    display: flex;
    align-items: center;
    padding-right: 5px;
    font-size: 16px;
    cursor: pointer;
  }

  .title {
    color: #8c8c8c;
    font-size: 16px;
  }
}
</style>
